<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card" style="margin-top: 10px;">
      <div slot="header" class="clearfix">
        <span class="cardTitle">{{ $t('personalInformation') }}</span>
      </div>

      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t('userName') }}：{{ operator ? operator.base_info.real_name : '' }}</div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t('phoneNumber') }}：{{ operator ? operator.base_info.cell : '' }}</div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t('iDNumber') }}：{{ operator ? operator.base_info.id_card : '' }}</div>
      </el-col>
    </el-card>

    <el-card class="box-card" style="margin-top: 10px;">
      <div slot="header" class="clearfix">
        <span class="cardTitle">{{ $t('callLog') }}</span>
      </div>

          <el-table
            :data="operator && operator.call_report ? operator.call_report.slice((currentPage-1)*pageSize,currentPage*pageSize) : null"
            stripe
            :current-page.sync="currentPage"
            style="width: 100%">
            <el-table-column
              prop="cell"
              :label="$t('phoneNumber')"
              width="180"/>
            <el-table-column
              prop="total_count"
              :label="$t('callFrequency')"
              width="180">
            </el-table-column>
            <el-table-column
              prop="total_duration"
              :label="$t('totalACDTalkTime')">
            </el-table-column>
            <el-table-column
              prop="last_call_time"
              :label="$t('recentCallTime')"/>
          </el-table>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
    </el-card>
  </div>
</template>
<script>
import {getOperatorLog} from "@/api/app/user";

export default {
  data() {
    return {
      operator: null,
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  methods: {

    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    /**
     * 运营商明细
     */
    getOperatorLog(userId) {
      getOperatorLog({userId: userId}).then(response => {
          this.operator = response.data;
          if (response.data && response.data.call_report){
            this.total = response.data.call_report.length;
          }
        }
      );
    },
  }
}
</script>
